<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标拖拽</title>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
			}
			#dd{
				width: 120px;
				height: 120px;
				background: #00FF00;
				position: absolute;
			}
		</style>
	</head>
	<body onmousemove="onmove(event)">
		<div id="dd" onmousedown="ondown()" onmouseup="onup()" style="left: 80px;top: 120px;">
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var dd;
	var mflag = false;
	function ondown(){
		dd = document.getElementById("dd")
		mflag = true;
	}
	function onmove(e){//e是事件的状态
		if(mflag){//clientX表示鼠标相对于浏览器的位置
			dd.style.left = e.clientX-60+"px";//减60是为了把鼠标放在div的中心
			dd.style.top = e.clientY-60+"px"
		}
	}
	function onup(){
		mflag = false;
	}
</script>